<template>
    <div class="operationRecords">
        <div class="search-user">
            <el-input v-model="searchForm.key" class="search-input" placeholder="用户名/企业名称" style="width: 200px;"></el-input>
            <div class="search-btn" @click="clickSearch">查询</div>
        </div>
        <el-table
            :data="operationList"
            border
            tooltip-effect="dark"
            style="width: 100%; height: calc(100vh - 240px)"
            >
            <el-table-column
                prop="name"
                align="center"
                label="登录用户名"
                width="160">
            </el-table-column>
            <el-table-column
                align="center"
                prop="companyName"
                label="企业名称"
                width="240">
            </el-table-column>
            <el-table-column
                align="center"
                label="操作名称"
                width="160">
                <template slot-scope="scope">
                    <div>{{ scope.row.operationId == 1 ? "购买服务" : scope.row.operationId == 2 ? "设置代理商" : ''}}</div>
                </template>
            </el-table-column>
            <el-table-column
                prop="content"
                align="center"
                label="操作内容">
            </el-table-column>
            <el-table-column
                label="操作时间"
                align="center"
                width="160">
                <template slot-scope="scope">
                    <div>{{ scope.row.createTime | formatDateMin }}</div>
                </template>
            </el-table-column>
        </el-table>
        <div class="page">
            <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="pageNum"
            :page-sizes="[10]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
            </el-pagination>
        </div>
    </div>
</template>
<script>
import { selectAdminRecordListApi } from "@/api/api.js"
export default {
    data(){
        return{
            searchForm: {
                key: ''
            },
            pageNum: 1,
            total: 0,
            operationList: []
        }
    },
    created() {
        this.search();
    },
    mounted() {
        
    },
    methods: {
        search(){
            let params = {
                name: this.searchForm.key,
                pageNum: this.pageNum
            }
            console.log(params)
            selectAdminRecordListApi(params).then(res => {
                if (res.code == 200) {
                    this.operationList = res.data.pageInfo.list;
                    this.total = res.data.pageInfo.total;
                } else {
                    this.operationList = [];
                    this.$message({
                        message: res.message,
                        type: 'warning'
                    });
                }
            }).catch(err => {
                this.operationList = [];
            })
        },
        clickSearch(){
            this.pageNum = 1;
            this.search();
        },
        handleCurrentChange(){
            this.search();
        }
    }
}
</script>
<style lang="scss">
.operationRecords{
    .search-user{
        display: flex;
        margin-bottom: 10px;
        .search-input{
            height: 30px;
            margin-right: 10px;
            .el-input__inner{
                height: 30px;
            }
        }
        .search-btn{
            border-radius: 4px;
            // background: #B9EBEA;
            background: #51CDCB;
            font-size: 14px;
            line-height: 30px;
            height: 30px;
            color: #fff;
            padding: 0 20px;
            cursor: pointer;
        }
        .disabled{
            background: #B9EBEA;
        }
    }
    .page{
        background: #fff;
        padding: 10px 0;
        text-align: center;
    }
}
</style>